"use client";
import React, { useState } from "react";
import { Input, Button, Select, Table, Space } from "antd";

const SearchPage1: React.FC = () => {

  const { Option } = Select;

  const [searchValue, setSearchValue] = useState("");
  const [data, setData] = useState<{ key: string; result: string }[]>([]);

  const handleSearch = () => {
    // 这里可以添加实际的搜索逻辑
    setData([
      { key: "1", result: `搜索结果：${searchValue} - 示例数据 1` },
      { key: "2", result: `搜索结果：${searchValue} - 示例数据 2` },
    ]);
  };

  const selectBefore = (
    <Select defaultValue="Source IP">
      <Option value="Source IP">Source IP</Option>
      <Option value="Domain">Under construct</Option>
    </Select>
  );

  return (
    <div style={{ padding: 24, background: "#fff", borderRadius: 8 }}>
      <Space direction="vertical">
        <Input addonBefore={selectBefore} defaultValue="8.8.8.8" style={{ width: 400 }} />
        <Button type="primary" onClick={handleSearch} style={{ width: "20%", display: "flex", justifyContent: "center" }}>
        搜索
      </Button>
      </Space>
      

      <Table
        style={{ marginTop: 16 }}
        columns={[{ title: "搜索结果", dataIndex: "result", key: "result" }]}
        dataSource={data}
        pagination={false}
      />
    </div>
  );
};

export default SearchPage1;
